
<blockquote class="layui-elem-quote">添加分类</blockquote>

<!-- 表单 -->
<form class = "layui-form">
  <div class = "layui-form-item">
      <label class = "layui-form-label">分类名</label>
      <div class="layui-input-inline">
          <input class="layui-input" type="text" name = "name" required placeholder="请输入分类名">
      </div>
  </div>
  <div class = "layui-form-item">
      <label class = "layui-form-label">父分类</label>
      <div class = "layui-input-inline">
          <select name="parentId"></select>
      </div>
  </div>
  <div class = "layui-form-item">
    <label class = "layui-form-label">主页推荐</label>
    <div class = "layui-input-inline">
        <input type = "radio" name="recom" value="0" title="不推荐" checked>
        <input type = "radio" name="recom" value="1" title="推荐" >
    </div>
  </div>
  <div class = "layui-form-item">
    <label class = "layui-form-label">描述</label>
    <div class = "layui-input-inline">
      <textarea name = "dscp" placehoder="请输入分类描述" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class = "layui-form-item">
    <label class = "layui-form-label">图片</label>
    <div class = "layui-input-inline">
      <!--图片上传插件-->
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
          <img class="layui-upload-img" id="demo1" style="width:92px;height:92px;">
          <p id="demoText"></p>
        </div>
        <div style="width: 95px;">
          <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
          </div>
        </div>
      </div>

      <a name="list-progress"> </a>

      </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
        <input type="hidden" name="pic">
        <button type="submit" lay-submit lay-filter="category-add" class = "layui-btn">提交</button>
    </div>
  </div>
</form>

<script>
    layui.use(['form','upload','element'],function (){
        var form = layui.form;
        upload = layui.upload;
        element = layui.element;
        $ = layui.$;

        //ajax获取父分类的列表
        $.ajax({
            url:'api/category',
            data: {parentId: 0},
            type: 'get',
            dataType: 'json',
            success: function (result){
                var html = '<option value="">请选择父分类</option>';
                //遍历查询到的数据
                $.each(result.data,function (index,item){
                    html += '<option value="'+item.id+'">'+item.name+'</option>';
                });
                $('select[name="parentId"]').html(html);

                //渲染一次表单
                form.render();
            },
            error: function (){
                layer.msg('请求失败');
            }
        });

        //渲染表单
        form.render();
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('input[name="pic"]').val(res.data);
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //表单的提交
        form.on('submit(category-add)',function(data){
            //Ajax将表单数据提交到服务器
            //添加分类的url  /api/category POST
            console.log(JSON.stringify(data.field));
            $.ajax({
                url: '/api/category',
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8',
                type: 'post',
                dataType: 'json',
               success: function(result){
                    if(result.code == 0){
                        layer.msg("添加成功");
                    }else{
                        layer.msg(result.msg);
                    }
               },
                error: function (){
                    layer.msg("请求失败");
                }
            });
            //阻止表单的自动提交
            return false;
        })
    });
</script>